.container {
  background: #f0f0f0;
  height: 100%;
  padding-bottom: 150rpx;

  swiper {
    height: 750rpx;
    width: 100%;
    border-bottom: 2rpx solid #f8f8f8;

    image {
      height: 750rpx;
      width: 100%;
    }
  }

  .goodsInfo {
    padding: 24rpx 0 24rpx 24rpx;
    position: relative;
    background: #fff;

    .titlebar {
      position: relative;
      line-height: 40rpx;
      padding-right: 104rpx;
      margin-top: 24rpx;

      .title {
        font-size: 28rpx;
        color: #333;
        padding-right: 12rpx;
      }
      .share {
        position: absolute;
        top: 0;
        right: 12rpx;
        // width: 50rpx;
        color: #666;
        font-size: 20rpx;
        margin-left: 12rpx;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #fff;

        image {
          display: block;
          margin: auto;
          width: 40rpx;
          height: 40rpx;
        }
        &::after {
          content: '';
          display: block;
          width: 1px;
          height: auto;
          background: #f1f1f1;
          position: absolute;
          top: 0;
          bottom: 5px;
          left: 0;
        }
      }
    }

    .describe {
      background: #fff;
      line-height: 40rpx;
      color: #999;
      font-size: 24rpx;
      margin-top: 6rpx;
      margin-right: 104rpx;
    }

    .priceStore {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .priceInfo {
        // height: 100rpx;
        // line-height: 100rpx;
        font-size: 32rpx;

        .price {
          color: #e02e2e;
          font-weight: 600;
          margin-right: 24rpx;

          .price-num {
            font-weight: 600;
          }
        }

        .original-price {
          font-size: 24rpx;
          color: #999;
          text-decoration: line-through;
        }
        .sales {
          color: #999;
        }
      }

      .store {
        display: flex;
        width: auto;
        .icon {
          width: 36rpx;
          height: 36rpx;
        }
      }
    }
  }

  .more {
    position: absolute;
    right: 20rpx;
    width: 60rpx;
    top: 10rpx;
    text-align: right;
    font-size: 40rpx;
    color: #999;
    letter-spacing: 1px;
  }

  .sku {
    padding: 20rpx;
    background: #fff;
    margin-top: 20rpx;
    position: relative;
    line-height: 48rpx;
  }

  .sku-tit {
    position: absolute;
    display: inline-block;
    width: 60rpx;
    left: 20rpx;
    font-size: 22rpx;
    top: 20rpx;
    color: #999;
  }

  .sku-con {
    margin: 0 80rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 28rpx;
    font-weight: bold;
  }

  .comment {
    position: relative;
    line-height: 48rpx;
    margin-top: 20rpx;
    background: #fff;

    .titlebar {
      font-size: 32rpx;
      position: relative;
      border-bottom: 1px solid #ddd;
      padding: 20rpx;

      .text {
        color: #000;
        font-size: 28rpx;
        font-weight: bold;
      }

      .cmt-good {
        color: #e02e2e;
        font-size: 24rpx;
      }
      .cmt-count {
        position: absolute;
        right: 20rpx;
        top: 20rpx;
        font-size: 24rpx;
        color: #666;
      }

      .cmt-more {
        width: 20rpx;
        height: 20rpx;
        border-top: 2rpx solid #999;
        border-right: 2rpx solid #999;
        transform: rotate(45deg);
        margin-left: 10rpx;
        display: inline-block;
      }
    }

    .content {
      padding: 0 20rpx;

      .tag {
        position: relative;
        padding: 10px 3px 0 0;
        margin: 0;
        text {
          display: inline-block;
          margin: 0 10px 10px 0;
          padding: 0 10px;
          height: 25px;
          line-height: 25px;
          border-radius: 3px;
          font-size: 12px;
          background: #fcedeb;
        }
        text.selected {
          color: #fff;
          background: #e93b3d;
        }
      }

      .items {
        .item {
          position: relative;
          padding: 10px 0;
          &::after {
            content: '';
            height: 0;
            display: block;
            border-bottom: 1px solid #ddd;
            position: absolute;
            left: 0;
            bottom: 0;
            right: -10px;
            border-bottom-color: #e5e5e5;
          }

          .user {
            line-height: 25px;
            margin-bottom: 8px;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .info {
              display: flex;
              align-items: center;
              width: 400rpx;

              .icon {
                width: 25px;
                height: 25px;
                border-radius: 50%;
                vertical-align: middle;
              }
              .nickname {
                margin-left: 10px;
                display: inline-block;
                color: #333;
                max-width: 8.2em;
                height: 25px;
                line-height: 27px;
              }
            }
            .date {
              color: #999;
              font-size: 24rpx;
            }
          }
        }

        .empty {
          display: block;
          font-size: 24rpx;
          text-align: center;
          color: #aaa;
          margin-top: 5vh;
        }
      }
    }

    .cmt-cnt {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      position: relative;
      line-height: 1.5;
      font-size: 14px;
      margin: 5px 0;
      word-break: break-all;
      max-height: 126px;
    }
    .cmt-attr {
      height: 85px;
      width: 100%;
      white-space: nowrap;
      image {
        display: inline-block;
        width: 80px;
        height: 80px;
        margin-right: 5px;
        margin-bottom: 5px;
        border-radius: 2px;
        background: #f3f3f3;
      }
    }
    .cmt-more-v {
      text-align: center;
      background-color: #fff;
      font-size: 12px;
      text {
        height: 25px;
        line-height: 25px;
        font-size: 12px;
        text-align: center;
        color: #333;
        padding: 0px 10px;
        margin: 10px 0;
        border: 1px solid #ccc;
        border-radius: 40px;
        display: inline-block;
      }
    }

    .cmt-reply {
      font-size: 14px;
      border-top: 1px dashed #ddd;
      padding: 5px 0;
      .reply-tit {
        color: #e02e2e;
      }
    }
  }

  .productDetail {
    position: relative;
    background: #fff;
    margin-top: 20rpx;
    line-height: 48rpx;

    .titlebar {
      font-size: 32rpx;
      position: relative;
      border-bottom: 1px solid #ddd;
      padding: 20rpx;

      .text {
        color: #000;
        font-size: 28rpx;
        font-weight: bold;
      }
    }

    image {
      width: 750rpx !important;
      display: block;
    }

    rich-text {
      image {
        width: 100% !important;
      }
    }
  }
  :deep(.img) {
    width: 100% !important;
    display: block;
  }

  .bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    height: 98rpx;
    z-index: 1;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
    .btn {
      position: relative;
      display: flex;
      flex-grow: 1;
      justify-content: center;
      align-items: center;
      width: 0;
      background-color: #fff;
      font-size: 28rpx;
      flex-flow: column;
      .badge {
        position: absolute;
        top: 20rpx;
        left: 62rpx;
        display: inline-block;
        width: 28rpx;
        height: 28rpx;
        border-radius: 14rpx;
        background-color: #e02e2e;
        text-align: center;
        line-height: 28rpx;
        font-size: 18rpx;
        color: #fff;
      }
      .badge-1 {
        width: 36rpx;
      }
    }
    .btn.icon {
      flex-grow: 0;
      flex-shrink: 0;
      width: 125rpx;
      font-size: 20rpx;
      color: #666;
      image {
        width: 50rpx;
        height: 50rpx;
      }
    }
    .btn.cart {
      background: #ffbe00;
      color: #fff;
    }
    .btn.buy {
      background: #f02e2e; // #F21C0C
      color: #fff;
    }
    .bargain {
      background-color: green;
      color: #fff;
    }
  }

  .comment-popup {
    background-color: #fff;

    .titlebar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12rpx;

      .title {
        color: #000;
        font-size: 32rpx;
        font-weight: bold;
      }
      .closes {
        border-radius: 12px;
        text-align: center;
        height: 20px;
        width: 20px;
        color: #aaa;
        font-size: 18px;
        &::before {
          content: '\2716';
        }
      }
    }

    .content {
      padding: 0 20rpx;

      .tag {
        position: relative;
        padding: 10px 3px 0 0;
        margin: 0;

        text {
          display: inline-block;
          margin: 0 10px 10px 0;
          padding: 0 10px;
          height: 25px;
          line-height: 25px;
          border-radius: 3px;
          font-size: 12px;
          background: #fcedeb;
        }
        text.selected {
          color: #fff;
          background: #e02e2e;
        }
      }
      .cmt-items {
        .empty {
          display: block;
          font-size: 24rpx;
          text-align: center;
          color: #aaa;
          margin-top: 5vh;
        }
      }
    }

    .cmt-cnt {
      -webkit-line-clamp: 20;
      max-height: 500px;
    }
    .load-more {
      font-size: 14px;
      padding: 20px;
      text-align: center;
      margin-bottom: 10px;
      text {
        border: 1px solid #ddd;
        padding: 5px 10px;
        border-radius: 10px;
        color: #666;
      }
    }
  }

  .close {
    color: #aaa;
    border-radius: 12px;
    line-height: 20px;
    text-align: center;
    height: 20px;
    width: 20px;
    font-size: 18px;
    padding: 1px;
    top: 10px;
    right: 10px;
    position: absolute;
    &::before {
      content: '\2716';
    }
  }

  .popup-cnt {
    max-height: 429px;
    overflow: auto;
    padding: 0 10px;
  }

  .skuPop {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    // background-color: rgba(0, 0, 0, 0.3);

    .mask {
      background-color: rgba(0, 0, 0, 0.3);
      height: 100%;
    }

    .skuPopContent {
      position: absolute;
      bottom: 0;
      width: 100%;
      min-height: 375px;
      max-height: 475px;
      background-color: #fff;
    }

    .titleBar {
      position: relative;
      line-height: 46px;
      font-size: 16px;
      color: #333;
      height: 70px;
      padding: 0 0 10px 110px;
      background-color: #fff;
    }
  }
  .pup-sku-img {
    position: absolute;
    left: 10px;
    top: -20px;
    border-radius: 2px;
    width: 90px;
    height: 90px;
    border: 0 none;
    vertical-align: top;
  }
  .pup-sku-price {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    color: #e4393c;
    font-size: 10px;
  }
  .pup-sku-price-int {
    font-size: 16px;
  }
  .pup-sku-prop {
    word-break: break-all;
    font-size: 12px;
    color: #333;
    line-height: 1.4em;
    padding-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text {
      color: #999;
      margin-right: 5px;
    }
  }
  .pup-sku-body {
    box-sizing: border-box;
    max-height: 379px;
    padding-bottom: 100px;
    overflow: auto;
  }
  .pup-sku-area {
    .sku-kind {
      font-size: 12px;
      color: #000;
      margin: 0 10px;
      height: 40px;
      line-height: 40px;
    }
    .sku-choose {
      overflow: hidden;
      margin-bottom: 3px;
    }
  }
  .sku-choose-item {
    display: inline-block;
    padding: 0 10px;
    min-width: 20px;
    max-width: 270px;
    overflow: hidden;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-left: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    color: #333;
    background-color: #f7f7f7;
    font-size: 14px;
  }
  .sku-choose-item.active {
    background-color: #e02e2e;
    color: #fff;
  }
  .sku-choose-item.gray {
    background-color: #f9f9f9;
    color: #ddd;
  }
  .pup-sku-count {
    padding: 0 10px 13px;
    font-size: 12px;
    .count-name {
      color: #000;
      height: 31px;
      line-height: 31px;
      width: 100rpx;
    }
    .num-wrap {
      position: relative;
      z-index: 0;
      width: 110px;
      float: right;
      vertical-align: middle;
      display: flex;
    }
    .text-wrap {
      position: relative;
      width: 45px;
      z-index: 0;
      margin: 0 1px;
      input {
        height: 30px;
        width: 100%;
        color: #333;
        background: #fff;
        font-size: 12px;
        text-align: center;
        border: none;
        background: #f7f7f7;
      }
    }
  }
  .num-wrap {
    .minus {
      position: relative;
      max-width: 30px;
      min-width: 30px;
      height: 30px;
      line-height: 30px;
      background: #f7f7f7;
      text-align: center;
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
    }
    .plus {
      position: relative;
      max-width: 30px;
      min-width: 30px;
      height: 30px;
      line-height: 30px;
      background: #f7f7f7;
      text-align: center;
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
    }
    .row {
      border-radius: 20px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -7px;
      margin-top: -1px;
      width: 14px;
      height: 2px;
      background-color: #ccc;
    }
    .col {
      border-radius: 20px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -1px;
      margin-top: -7px;
      width: 2px;
      height: 14px;
      background-color: #999;
    }
  }
  .pup-sku-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: row nowrap;
    height: 98rpx;
    z-index: 999;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
    .btn {
      position: relative;
      display: flex;
      flex-grow: 1;
      justify-content: center;
      align-items: center;
      width: 0;
      background-color: #fff;
      font-size: 28rpx;
      flex-flow: column;
    }
    .btn.cart {
      background: #ffbe00;
      color: #fff;
    }
    .btn.buy {
      background: #f02e2e;
      color: #fff;
    }
    .bargain {
      background-color: green;
      color: #fff;
    }
  }

  .selfBargain {
    background-color: #999;
    color: #666;
  }
}
